<template>
    <div>
        <cu-navbar>
            <block slot="content">{{ name }}</block>
        </cu-navbar>
        <view class="jingpai-detail-page page">
            <div class="qiang-date">
                抢单时间: {{ date }}
            </div>
            <div class="date-box f-c a-c j-c" v-if="!list.length && times > 0">
                <u-image src="/static/icon9.png" width="260rpx" height="300rpx"></u-image>
                <div class="text">距离开始抢单还剩</div>
                <div class="out-time">
                    <u-count-down :timestamp="times" font-size="90"></u-count-down>
                </div>
            </div>
            <div class="product-list">
                <u-row gutter="10">
                    <u-col span="6" v-for="(item,index) in list" :key="item.product_sn">
                        <div class="product-item">
                            <u-image :src="item.image" width="100%" height="300rpx"></u-image>
                            <div class="product-name">{{ item.name }}</div>
<!--                            <div class="product-num">-->
<!--                                编号：{{ item.product_sn}}-->
<!--                            </div>-->
                          <div class="product-price">¥ {{ item.filterPrice }}</div>
                            <div class="pay-way">
                              <u-image style="width: 45rpx;height: 45rpx;margin: 0 10rpx" v-for="payIcon in item.payText" :key="payIcon" :src="payIcon"></u-image>
                            </div>
                            <div v-if="item.stock" class="button" @click="go(item)">抢拍</div>
                            <div v-else class="button disableBtn">已抢完</div>
                        </div>
                    </u-col>
                </u-row>
            </div>
            <!-- 古玩转宝阁 -->
            <u-popup v-model="show2" mode="center">
                <view class="box_popup box_popup1">
                    <view>古玩转宝阁</view>
                    <view>输入接收宝阁字母编号，宝阁编号一
                        般为宝阁汉字的首字母</view>
                    <input type="text" v-model="orgcode" />
                    <view class="btn">
                        <view class="cancel" @click="show2 = false">取消</view>
                        <view class="ok" @click="submitZC">确定</view>
                    </view>
                </view>
            </u-popup>
        </view>
    </div>
</template>

<script>
	export default {
		data() {
			return {
				shopId: '',
				name: '',
				date: '',
				list: [
				],
				timeData: {},
				times: 0
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return
			}
			this.date = options.date
			this.name = options.name
			this.shopId = options.shopId
			this.getList()
      let date0 = this.date.split('-')[0]
      let h0 = parseInt(date0.split(':')[0])
      let m0 = parseInt(date0.split(':')[1])
			let date = this.date.split('-')[1]
			let h = parseInt(date.split(':')[0])
			let m = parseInt(date.split(':')[1])
			let c_h = new Date().getHours()
			let c_m = new Date().getMinutes()
        console.log(c_h, c_m)
      let ms1 = h0 * 60 * 60 + m0 * 60
      let ms2 = c_h * 60 * 60 + c_m * 60
      let ms3 = h * 60 * 60 + m * 60
      if ((ms2 > ms1) && (ms2 < ms3)) {
        this.times = 0
        return;
      }
      // 距离明天
      if(c_h > h0) {
        let _h = 23 - c_h + h0
        let _m = m0 + c_m
        this.times = _h * 60 * 60 + _m * 60
      } else {
        // 距离当天
        this.times = ms1 - ms2
      }
		},
      onPullDownRefresh() {
          this.getList()
      },
		methods: {
			getList() {
				this.$api.qiangdan_list(this.shopId).then(res => {
					  this.list = res.result.map(el => {
              return {
                ...el,
                payText: [
                  el.wx === 1 ? '/static/wx.png' : '',
                  el.zfb === 1 ? '/static/zfb.png' : '',
                  el.yhk === 1 ? '/static/yhk.png' : '',
                  el.qt === 1 ? '/static/qt.png' : '',
                ].filter(el => el),
                filterPrice: this.filterPrice(el.price)
              }
            })
            uni.stopPullDownRefresh()
        })
			},
      filterPrice(price) {
        let _price = parseInt(price).toString()
        if (_price.length === 3) {
          return Math.round(_price / 100) * 100
        } else {
          // 金额 最后两位四舍五入
          if (_price.length > 3) {
            let price1 = _price.slice(0, _price.length - 3)
            let price2 = _price.slice(_price.length - 3)
            console.log('price1',price1)
            console.log('price2',price2)
            let price3 = Math.round(price2 / 100) * 100
            console.log('price3', price3)
            return price1 + '' + (price3 || '000')
          } else {
            return  _price
          }
        }

      },
			go(item) {
				this.$api.qiangdan(item.product_sn).then(res => {
          if (res.code == 1) {
            item.stock = 0
            this.$common.successToShow(res.reason)
          } else {
            this.$common.errorToShow(res.reason)
          }
				})
			},
			onChange(e) {
			                this.timeData = e
			            }
		}
	}
</script>

<style lang="scss">
.jingpai-detail-page {
	background-color: rgb(255, 68, 59);
	padding: 0 20rpx;
	min-height: 100%;
	.qiang-date {
		    color: #fff;
		    font-size: 14px;
		    line-height: 32px;
		    text-indent: 20px;
			text-align: center
	}
  .out-time {
    margin-top: 20px;
  }
	.text {
		    margin-top: 83rpx;
		    font-size: 32rpx;
		    font-weight: 400;
		    color: #888;
	}
	.date-box {
		font-size: 28rpx;
		    width: 100%;
		    height: 700rpx;
		    background-color: #fff;
		    margin: 40rpx auto;
		    text-align: center;
		    border-radius: 4px;
	}
	.product-list {
		padding: 30rpx;
	}
	.product-item {
	    border-radius: 12rpx;
	    overflow: hidden;
		background-color: #fff;
		padding: 5px;
		margin-bottom: 10rpx;
		.product-name {
			margin: 10rpx 0;
			padding:  0 10rpx;
		}
		.product-num {
			margin: 10rpx 0;
			padding:  0 10rpx;
			word-wrap: break-word;
		}
		.product-price {
			  color: #f6220c;
			  padding:  0 10rpx;
		}
    .pay-way {
      margin: 10rpx 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      min-height: 45rpx;
    }
		.button {
			background-color: rgb(255, 68, 59);
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			border-radius: 4px;
			margin: 10rpx;
		}
    .disableBtn {
      background-color: #c9c9c9;
    }
	}
}
</style>
